<template>
   <div>
    <van-form validate-first @submit="onSubmit" >
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
      label="账号"
    v-model="user.name"
    name="username"
    placeholder="请输入账号"
   
    :rules="[{ validator, message: '请输入正确的账号' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field
    label="密码"
    v-model="user.pwd"
    type="password"
    name="password"
    placeholder="请输入密码"
    autocomplete="off"
    :rules="[{pwd, message: '请输入正确密码' }]"
  />
  <van-field name="checkbox" style="margin-left: 10px;">
  <template #input>
    <van-checkbox v-model="checkbox" icon-size="16px" style="border: 2px solid #000;border-radius: 100%;"/>
     <div style="display: inline-block;line-height: 44px;margin-left: 10px;font-size: 15px;">已阅读并同意爱坤账号用户协议和隐私政策</div>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" >登录</van-button>
  </div>
</van-form>
<div class="go-login">
 <span @click="register()"> 没有账号? 去注册</span>
</div>
   </div>
</template>

<script>
import {register} from '@/api/sjAPI'
export default {
  data(){
     return {
      user:{name: '',
            pwd: '',
          },
          checkbox: false,
      show :false,
     }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home")
    },
      // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
        // /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ 邮箱
      return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val);
    },
    pwd(val){
     return /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(val)
    },
    register(){
       this.$router.push("/register")
    },
    onSubmit(values) {
        if(values.name !== "" && values.password !== "" && values.checkbox !=false) { 
          register(this.user).then(res => {
            console.log("res",res);
        })
        localStorage.setItem("user",JSON.stringify(this.user))
        if(localStorage.getItem("user")){
          this.$router.push("/my")
        }
        }
    },
},

}
</script>

<style lang="less" scoped>
  .van-form {
    margin-top: 100px;
  }
  .go-login {
    margin-top: 120px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
  }
</style>